import { FC, LegacyRef, useEffect, useRef, useState } from 'react';
import { message } from 'antd';
import VirtualList from 'rc-virtual-list';
import MarketChart from './components/market-chart';
import { downColor, upColor } from './constants/color';
import { formatChineseAmount } from './utils';
import useContainer from '@/hooks/use-container';
import useQuerySearchParams from '@/hooks/use-query-search-params';
import Analyze from '@/utils/analyze';

const Quotation: FC = () => {
  const [marketSnapshot, setMarketSnapshot] = useState<any>([]);
  const containerRef: LegacyRef<HTMLDivElement> = useRef<HTMLDivElement>();
  const [params] = useQuerySearchParams();

  const { height } = useContainer(containerRef);
  const analyzeRef: any = useRef();

  useEffect(() => {
    if (params?.date && params?.secid) {
      const url: string = import.meta.env.MODE === 'development' ? `../../../../market` : '../../../txt/market';
      const uri: string = `${url}/${params?.date}/${params?.secid}.txt`;

      fetch(uri)
        .then((response) => response.text())
        .then((text: string) => {
          const originData = JSON.parse(`[${text?.slice(0, text.length - 1)}]`);

          analyzeRef.current = new Analyze({ originData });
          setMarketSnapshot(analyzeRef.current.getMarketSnapshot());
        })
        .catch(() => {
          message.error('无法访问资源，请确认资源是否存在或确认date及secid是否正确');
        });
    } else {
      message.error(`请输入date及secid`);
    }
  }, [params?.date, params?.secid]);

  return (
    <div>
      <div className="pl-4 mb-4 text-base">
        <span
          className="mr-4"
          style={{
            color: downColor,
          }}
        >
          <span className="mr-2">卖单打压次数:</span>
          <span>
            {analyzeRef?.current?.shippingOrderCount + analyzeRef?.current?.shippingOrder10TCount}
            <span className="ml-2 text-gray-700">
              {`(5倍:${analyzeRef?.current?.shippingOrderCount}次+10倍:${analyzeRef?.current?.shippingOrder10TCount}次)`}
            </span>
          </span>
        </span>
        <span
          className="mr-4"
          style={{
            color: upColor,
          }}
        >
          <span className="mr-2">买单托盘次数:</span>
          <span>
            {analyzeRef?.current?.billOfLadingCount + analyzeRef?.current?.billOfLading10TCount}
            <span className="ml-2 text-gray-700">
              {`(5倍:${analyzeRef?.current?.billOfLadingCount}次+10倍:${analyzeRef?.current?.billOfLading10TCount}次)`}
            </span>
          </span>
        </span>

        <span
          className="mr-4"
          style={{
            color: downColor,
          }}
        >
          <span className="mr-2">卖单平均压单额:</span>
          <span>{formatChineseAmount(analyzeRef?.current?.avgSellAmount)}</span>
        </span>
        <span
          className="mr-4"
          style={{
            color: upColor,
          }}
        >
          <span className="mr-2">买单平均托单额:</span>
          <span>{formatChineseAmount(analyzeRef?.current?.avgBuyAmount)}</span>
        </span>
        <span
          className="mr-4"
          style={{
            color: downColor,
          }}
        >
          <span className="mr-2">内盘大于外盘次数:</span>
          <span>{analyzeRef?.current?.innerMoreThanOuterCount}</span>
        </span>
        <span
          className="mr-4"
          style={{
            color: upColor,
          }}
        >
          <span className="mr-2">外盘大于内盘次数:</span>
          <span>{analyzeRef?.current?.outerMoreThanInnerCount}</span>
        </span>
      </div>
      <div ref={containerRef} className="pl-4">
        <VirtualList data={marketSnapshot} height={height} itemHeight={387} itemKey="hqIndex">
          {(item: any, index) => {
            console.log(item);

            return (
              <div key={index}>
                <MarketChart data={item} />
              </div>
            );
          }}
        </VirtualList>
      </div>
    </div>
  );
};

export default Quotation;
